<template>
  <div class="more-music-page">
    <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <img
        class="doge"
        slot="pulling"
        slot-scope="props"
        src="https://img.yzcdn.cn/vant/doge.png"
        :style="{ transform: `scale(${props.distance / 80})` }"
      />
      <!-- 释放提示 -->
      <img class="doge" slot="loosing" src="https://img.yzcdn.cn/vant/doge.png" />
      <!-- 加载提示 -->
      <img class="doge" slot="loading" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />

      <h3>{{$route.params.title}}</h3>
      <div>
        <van-list v-model="loading" :finished="finished" finished-text="加载完了" @load="onLoad">
          <van-row gutter="10">
            <van-col class="music-item" v-for="item in list" span="12" :key="item.song_id">
              <img v-lazy="item.pic_big" />
              <div class="van-ellipsis">{{item.title}}</div>
              <div class="van-ellipsis">{{item.author}}</div>
            </van-col>
          </van-row>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import http from "@api/http";
import { getMusicBillList } from "@api/music-api";

export default {
  created() {
    // const url = `/api/v1/restserver/ting?method=baidu.ting.billboard.billList&type=${this.$route.params.type}&size=12&offset=0`;
    // console.log(url);

    // http.get(url).then(res => {
    //   // 拿到数据
    //   // 将数据渲染出来
    //   this.list = res.song_list;
    // });
    getMusicBillList(this.$route.params.type, 12, 0).then(res => {
      this.list = res.song_list;
    });
  },
  data() {
    return {
      // 是否正在下拉加载
      isLoading: false,
      list: [],
      loading: false,
      finished: false,
      offset: 0
    };
  },
  methods: {
    // 下拉加载执行的函数
    onRefresh() {
      // 相当于刷新界面
      this.offset = 0;
      getMusicBillList(this.$route.params.type, 12, this.offset).then(res => {
        this.list = res.song_list;
        this.isLoading = false;
      });
    },
    onLoad() {
      // 需要做什么呢？
      // 加载下一页的数据
      // 翻第一页的时候，这个offset是不是就应该是12。翻第二页的时候应该是24
      // 每翻一次页，这个offset就应该加上size
      // this.offset += 12;
      // const url = `/api/v1/restserver/ting?method=baidu.ting.billboard.billList&type=${this.$route.params.type}&size=12&offset=${this.offset}`;
      // http.get(url).then(res => {
      //   // 请求到数据之后，进行什么操作
      //   // 需要进行列表的拼接
      //   if (res.song_list == null) {
      //     // 代表我们的列表加载完了
      //     this.finished = true;
      //     this.loading = false;
      //   } else {
      //     this.list = this.list.concat(res.song_list);
      //     this.loading = false;
      //   }
      // });
      // 加载完下一页的数据之后，需要把loading设置为false
      this.offset += 12;
      getMusicBillList(this.$route.params.type, 12, this.offset).then(res => {
        if (res.song_list == null) {
          // 代表我们的列表加载完了
          this.finished = true;
          this.loading = false;
        } else {
          this.list = this.list.concat(res.song_list);
          this.loading = false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.more-music-page {
  padding: 0 15px;
}
.music-item {
  margin-bottom: 10px;
  img {
    width: 100%;
  }

  div {
    color: #999;
  }
}
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
</style>